<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_列表渲染</title>
</head>
<body>

<!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

<div id="demo">
  <h2>测试: v-for 遍历数组</h2>

  <ul>
    <li v-for="(p, index) in persons" key="p.id">
      {{p.id}}--{{p.name}}--{{p.age}}
      --<button @click="deleteP(index)">删除</button>
      --<button @click="updateP(index, {id: Date.now(), name: 'xxxx', age: 23})">更新</button>
    </li>

    
  </ul>

  <h2>测试: v-for 遍历对象</h2>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      persons: [
        {id: 1, name: 'Tom', age: 15},
        {id: 2, name: 'Jack', age: 12},
        {id: 4, name: 'Bob', age: 17},
        {id: 6, name: 'Rose', age: 16},
        {id: 8, name: 'Else', age: 13}
      ]
    },

    methods: {
      deleteP (index) {
        this.persons.splice(index, 1)
      },

      updateP (index, newP) {
        console.log(this)
        // this.persons[index].name = newP.name
        // this.persons[index].age = newP.age

        // this.persons[index] = newP // 不会更新界面

        this.persons.splice(index, 1, newP) // vue重写后的splice方法
        // this.persons = []
      }
    },
  })

  /* 
  Vue的数据绑定如何实现
    1. vue会监视data中所有层次的属性
    2. 对象中的属性数据通过添加set方法来来实现监视
    3. 数组中的元素也实现了监视: 重写数组一系列更新元素的方法
      1). 调用原生对应的方法对元素进行处理
      2). 去更新界面
   */

</script>
</body>
</html>